<template>
	<view class="confirmOrder">
		<SRV-topbar title="买单详情" :isLeft="true"></SRV-topbar>
		<view class="goods_top">
			<view class="left">
				<image :src="info.cover" mode="aspectFill"></image>
				<text>{{info.title}}</text>
			</view>
		</view>
		<view class="main" v-for="(item,index) in info.comboList" :key="index">
			<view class="line">
				<view class="title">{{item.title}}</view>
				<view class="money">
					<input type="number" v-model="formData.ruleList[item.id]" @blur="changeMoney()" placeholder="请填写金额" />
				</view>
                <view class="remark">{{item.rewardRemark}}</view>
			</view>
		</view>
        
        <view class="line" style="border-bottom: 16rpx solid #efefef;padding: 30rpx;">
        	<view class="title">总金额</view>
        	<view class="money" style="color: red;">
        		￥{{total_money}}
        	</view>
        </view>
		<view class="bottom" :style="'height:' + bottomHeight + 'rpx;'">
		    <view class="right" style="width:100%;">
		        <view class="pay" @click="subBill()"  style="width:100%;">确定</view>
		    </view>
		</view>
	</view>
</template>

<script>
	var _self;
	import serve from '../static/request.js';
	import common from '../static/jump.js';
    import commonPay from '../static/commonPay.js';
	export default {
		data() {
			return {
				id: 0,
				info: {},
                formData: {
                	appkey: uni.getStorageSync('appkey'),
                	'access-token': uni.getStorageSync('access-token'),
                	id: 0,
                    ruleList: [],
                },
                total_money: 0.00,
                bottomHeight: 110,
			}
		},
		methods: {
			getInfo() {
				uni.showLoading({
					title: '加载中···',
					mask: true
				});
				serve.request({
					url: '/member/merchant/combo',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token'),
						id: _self.id
					},
					v: '/v3'
				}).then(res => {
					uni.hideLoading();
					if (res.code != 200) {
						uni.showToast({
							title: res.message,
							icon: 'none',
							success() {
								setTimeout(function() {
									common.jump('index')
								}, 2000)
							}
						});
					}
					_self.info = res.data;
                    _self.formData.id = _self.info.id;
                    _self.info.comboList.forEach((combo, key2) => {
                        _self.formData.ruleList[combo.id] = 0.00;
                    });
                    console.info(_self.formData);
				});
			},
            numFilter(value) {
            	let tempVal = parseFloat(value).toFixed(3);
            	let realVal = tempVal.substring(0, tempVal.length - 1);
            	return realVal;
            },
            changeMoney() {
                _self.total_money = 0;
                _self.formData.ruleList.forEach((money, key) => {
                    var moneyVal = 0;
                    if(money == '' || money == null || money < 0) {
                        _self.formData.ruleList[key] = 0;
                    } else {
                        moneyVal = money;
                    }
                    _self.total_money = _self.numFilter(Number(_self.total_money) + Number(moneyVal));
                });
            },
            subBill() {
                if(_self.total_money == 0) {
                    uni.showToast({
                    	title: "请设置买单金额",
                    	icon: 'none'
                    })
                    return;
                }
                _self.formData.ruleList.forEach((money, key) => {
                    if(money == '' || money == null || money < 0 || money.length === 0) {
                        _self.formData.ruleList.splice(key, 1);
                    } 
                });
                serve.request({
                	url: '/member/merchant/add-bill',
                	data: _self.formData,
                    v: '/v3',
                }, 'POST').then(res => {
                    uni.showToast({
                    	title: res.message,
                    	icon: 'none'
                    });
                	if (res.code == 200) {
                		uni.hideLoading();
                        if(res.data.isPay == 1) {
                            _self.payData.pay_type = res.data.pay_type;
                            _self.payData.pay_id = res.data.pay_id;
                            _self.payData.jumpFile = res.data.jumpFile;
                            commonPay.payFun(_self.payData, _self.payData.jumpFile);
                        }
                		else {
                            common.jump('appoint_view', res.data.jumpFile);
                        }
                        return;
                	}
                });
            },
            jump(jump_type, jump_link){
            	common.jump(jump_type, jump_link);
            }
		},
		onLoad(options) {
			_self = this;
            if (uni.getSystemInfoSync().safeAreaInsets.top > 20) {
                _self.bottomHeight = 178;
            }
			_self.id = options.id || 0;
			_self.getInfo();
		},
		onPullDownRefresh() {
			_self.getInfo();
		}
	}
</script>

<style scoped lang="scss">
	@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
		.confirmOrder {
			padding-bottom: 124upx !important;

			.bottom {
				padding-bottom: 12px !important;
			}
		}
	}

	.confirmOrder {
		padding-bottom: 100upx;

		.goods_top {
			display: flex;
			padding: 20rpx 30rpx 20rpx;
			box-sizing: border-box;
			justify-content: space-between;
			align-items: center;
			border-bottom: 16rpx solid #efefef;

			.left {
				font-size: 32upx;
				font-weight: 600upx;
				display: flex;
				align-items: center;
				color: #333333;

				image {
					width: 40upx;
					height: 35upx;
					margin-right: 13upx;
				}

				text {
					position: relative;
					padding-right: 30upx;
				}

			}

			.right {
				font-size: 32upx;
				display: flex;
				align-items: center;

				image {
					width: 27upx;
					height: 33upx;
					margin-right: 20upx;
				}


			}
		}

		.bottom {
			position: fixed;
			justify-content: space-between;
			align-items: center;
			bottom: 0upx;
			height: 100upx;
			display: flex;
			width: 100%;
			background: #FFFFFF;
            
            .right {
                display: flex;
            
                .pay {
                    width: 236upx;
                    height: 100upx;
                    line-height: 100upx;
                    font-size: 32upx;
                    color: rgba(255, 255, 255, 1);
                    text-align: center;
                    background: #EB5938;
                }
            }
		}
        .img {
            position: absolute;
            bottom: 0;
            height: 10upx;
            width: 100%;
        }

		.main {
			border-bottom: 16upx rgba(102, 102, 102, 0.05) solid;
			width: 100%;
		}

		.line {
			position: relative;
			box-sizing: border-box;
			padding: 30rpx 30rpx 0 30rpx;
			display: flex;
            flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			font-size: 28upx;
			color: #666666;
			border-bottom: 1upx rgba(235, 236, 240, 1) solid;

			text {
				color: #EB5938;
				font-size: 32upx;
			}
            .title {
                
            }
            .money {
                input {
                    border: 1px solid;
                        border-radius: 20rpx;
                        padding: 10rpx;
                }
            }
            .remark {
                border-top: 1rpx solid #ccc;
                width: 100vw;
                padding: 20rpx;
                margin-top: 10rpx;
                text-align: right;
            }
		}
	}
</style>
